<template>
  <van-tabbar v-model="active" class="tabbar">
    <van-tabbar-item to="/home/itemlist/1005000">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? icon.active1 : icon.inactive1" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/category/list/1005000">
      <span>分类</span>
      <template #icon="props">
        <img :src="props.active ? icon.active2 : icon.inactive2" />
      </template> </van-tabbar-item
    ><van-tabbar-item to="/buy">
      <span>值得买</span>
      <template #icon="props">
        <img :src="props.active ? icon.active3 : icon.inactive3" />
      </template> </van-tabbar-item
    ><van-tabbar-item to="/cart" :badge="$store.state.cartList.length">
      <span>购物车</span>
      <template #icon="props">
        <img :src="props.active ? icon.active4 : icon.inactive4" />
      </template> </van-tabbar-item
    ><van-tabbar-item to="/profile">
      <span>个人</span>
      <template #icon="props">
        <img :src="props.active ? icon.active5 : icon.inactive5" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "Tabbar",
  data() {
    return {
      active: 0,
      icon: {
        active1: require("assets/images/tabbar/home-active.png"),
        inactive1: require("assets/images/tabbar/home.png"),
        active2: require("assets/images/tabbar/category-active.png"),
        inactive2: require("assets/images/tabbar/category.png"),
        active3: require("assets/images/tabbar/buy-active.png"),
        inactive3: require("assets/images/tabbar/buy.png"),
        active4: require("assets/images/tabbar/cart-active.png"),
        inactive4: require("assets/images/tabbar/cart.png"),
        active5: require("assets/images/tabbar/profile-active.png"),
        inactive5: require("assets/images/tabbar/profile.png"),
      },
    };
  },
  watch: {
    $route(to, from) {
      // console.log(to);
      switch (to.matched[0].path) {
        case '/home':
          this.active = 0;
          break;
        case '/category':
          this.active = 1;
          break;
        case '/buy':
          this.active = 2;
          break;
        case '/cart':
          this.active = 3;
          break;
        case '/profile':
          this.active = 4;
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
.tabbar {
  border-top: 1px solid #d8c7c7;
  z-index: 4;
}
</style>